<template>
	<b-layout-index>
		<navbar :title="title"></navbar>
		<u-modal @confirm="statusOk" @cancel="statusClose" @close="statusClose" :showCancelButton="true"
			:show="statusShow" :title="statusTitle" :content='statusContent' :cancelText="$t('取消')"
			:confirmText="$t('确认')"></u-modal>

		<view class="mg-10 pd-10 bg-white br-rd-10">
			<image v-if="show.status==1" class="tamga" mode="widthFix" src="https://xahtan.xn--serkol-8m0k1433b.cn/static/yishenhe.b7faf983.png"></image>
			<u-cell-group :title="$t('基本信息')">
				<block v-for="(item,index) in listForm">

					<u-cell size="large" v-if="show[item.key]" class="bg-white br-rd-6" :border="false">
						<view slot="title">
							<text class="font-size-12">{{$t(item.name)}}</text>
						</view>
						<view slot="value" class="font-size-12">
							<text class="font-size-12"
								v-if="item.mode=='date'">{{$u.date(show[item.key],item.format?item.format:'')}}</text>
							<u--text v-else :format="item.format?item.format:''" :mode="item.mode?item.mode:'text'"
								:text="show[item.key]" size="12"></u--text>
						</view>

					</u-cell>
				</block>
			</u-cell-group>
		</view>
		<!-- 
		<u-cell-group title="提现信息">
			<block v-for="(item,index) in listForm1">

				<u-cell size="large" v-if="bankInfo[item.key]" :title="item.name" class="bg-white br-rd-6">

					<view  class="text-center"  slot="label">
						<image v-if="item.mode=='image'" @click="openPriview" :data-url="bankInfo[item.key]" mode="widthFix"
							:src="bankInfo[item.key]"></image>
					</view>


					<view slot="value">
						<view v-if="item.mode!='image'" class="text-center">
						<text v-if="item.mode=='date'">{{$u.date(bankInfo[item.key],item.format?item.format:'')}}</text>
						<u--text v-else :format="item.format?item.format:''" :mode="item.mode?item.mode:'text'"
							:text="bankInfo[item.key]">{{bankInfo[item.key]}}</u--text>
							</view>
					</view>
				

				</u-cell>
			</block>
		</u-cell-group> -->

		<view class="mg-10 pd-10 bg-white br-rd-10">
			<u-cell-group :title="$t('提现信息')">
				<block v-for="(item,index) in listForm1">

					<u-cell size="large" v-if="bankInfo[item.key]" class="bg-white br-rd-6" :border="false">
						<view slot="title">
							<text class="font-size-12">{{$t(item.name)}}</text>
						</view>
						<view class="text-center" slot="label">
							<image v-if="item.mode=='image'" @click="openPriview" :data-url="bankInfo[item.key]"
								mode="widthFix" :src="bankInfo[item.key]"></image>
						</view>

						<view slot="value" class="font-size-12">
							<view v-if="item.mode!='image'" class="text-center">
								<text class="font-size-12"
									v-if="item.mode=='date'">{{$u.date(bankInfo[item.key],item.format?item.format:'')}}</text>
								<u--text v-else :format="item.format?item.format:''" :mode="item.mode?item.mode:'text'"
									:text="bankInfo[item.key]" size="12"></u--text>
							</view>
						</view>

					</u-cell>
				</block>
			</u-cell-group>
			<image v-if="show.auditImageUrl && show.status==1" mode="widthFix" @click="openPriview"
				:data-url="show.auditImageUrl" :src="show.auditImageUrl">
			</image>
		</view>
		<block v-if="show.status==2">
			<view class="pd-right-10 pd-left-10">
				<view class="fileImage" @click="fileImage" :style="{'backgroundImage':'url('+uploadImage+')'}">
					<view class="cover">
						<iconfont icon="icon-xianzhi" size="40" :color="color.primary"></iconfont>
						<text>{{$t('发票上传')}}</text>
					</view>
				</view>
			</view>
			<view class="flex" style="padding: 20px;">
				<view class="flex-item  pd-10">
					<u-button @click="fetchWithdrawalStatus(1)" type="primary" :text="$t('已通过')"></u-button>
				</view>
				<view @click="fetchWithdrawalStatus(3)" class="flex-item pd-10">
					<u-button type="error" :text="$t('未通过')"></u-button>
				</view>
			</view>

		</block>
		</view>
	</b-layout-index>
</template>

<script>
	import {
		fileUpload
	} from "../../../../../api/public";
	import {
		findByWithdrawalShow,
		withdrawalStatus
	} from "@/api/userWallet.js";
	export default {
		data() {
			return {
				status: 0,
				statusShow: false,
				statusTitle: "",
				statusContent: "",
				show: {},
				bankInfo: {},
				title: "",
				page: 0,
				type: 0,
				listForm: [{
						icon: 'icon-qianbao',
						name: "经销商",
						key: "authName",
						mode: "name"
					},
					{
						icon: 'icon-qianbao',
						name: "订单号",
						key: "sn"
					},
					{
						icon: 'icon-chazhao',
						name: "提现金额",
						key: "request_amount",
						mode: "price"
					},
					{
						icon: 'icon-tuisong',
						name: "手续费",
						key: "service_charge",
						mode: "price"
					},
					{
						icon: 'icon-shangcheng',
						name: "实际金额",
						key: "amount",
						mode: "price"
					},
					{
						icon: 'icon-chazhao',
						name: "备注",
						key: "remark"
					},
					{
						icon: 'icon-tuisong',
						name: "申请时间",
						key: "createDate",
						mode: "date",
						format: "yyyy-mm-dd MM:ss"
					}
				],
				listForm1: [{
					icon: 'icon-qianbao',
					name: "收款人姓名",
					key: "userName",
					mode: "name"
				}, {
					icon: 'icon-qianbao',
					name: "卡号",
					key: "cardNo"
				}, {
					icon: 'icon-qianbao',
					name: "手机号",
					key: "phone",
					mode: "phone"
				}, {
					icon: 'icon-qianbao',
					name: "提现方式",
					key: "name"
				}, {
					icon: 'icon-qianbao',
					name: "地址",
					key: "address"
				}, {
					icon: 'icon-qianbao',
					name: "二维码",
					key: "image",
					mode: "image"
				}],
				listStatus: {
					0: {
						icon: 'icon-qianbao',
						name: "全部",
						status: 0
					},
					2: {
						icon: 'icon-chazhao',
						name: "审核中",
						status: 2
					},
					1: {
						icon: 'icon-tuisong',
						name: "已通过",
						status: 1
					},
					3: {
						icon: 'icon-shangcheng',
						name: "未通过",
						status: 3
					}
				},
				uploadImage: null,
				uploadImageId: 0

			}
		},
		onLoad: function(options) {
			this.fetchByWithdrawalShow(options.id ? options.id : 0)



		},

		onReachBottom: function() {

		},
		methods: {
			openGroup: function(e) {


			},
			fetchByWithdrawalShow: function(id = 0) {

				findByWithdrawalShow(id).then(res => {
					var title = res.authName ? res.authName : res.name;
					this.title = title
					wx.setNavigationBarTitle({
						title: title
					})
					this.show = res
					this.bankInfo = res.bankInfo
				})

			},
			openPriview: function(e) {
				console.log(e)
				var url = e.currentTarget.dataset.url;
				uni.previewImage({
					urls: [url]
				})
				console.log(e, url)
			},
			fetchWithdrawalStatus: function(status = 0) {
				this.status = status;
				let title = status == 1 ? this.$t('已通过') : this.$t('未通过')
				this.statusTitle = title;
				this.statusContent = title + this.$t("确定吗")
				this.statusShow = true;
				//	withdrawalStatus()
			},
			statusOk: function() {
				let show = this.show;
				let status = this.status;
				let the = this;
				if (the.uploadImageId > 0 && status == 1 || status == 3) {
					withdrawalStatus(show.id, status, the.uploadImageId).then(res => {
						uni.$u.toast(the.$t('操作成功'))
						the.fetchByWithdrawalShow(show.id)
					}).catch(e => {
						uni.$u.toast(the.$t('操作失败'))
					})
					this.statusShow = false;
				} else {
					uni.$u.toast(this.$t('发票不能为空'))
				}


			},
			statusClose: function() {
				this.statusShow = false;

			},
			fileImage: function() {
				var the = this;
				uni.chooseImage({
					count: 1,
					success(e) {
						var url = e.tempFilePaths[0]
						console.log(e)
						the.uploadImage = url
						fileUpload(url, 10).then(res => {
							console.log(res)
							the.uploadImageId = res.id
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fileImage {
		height: 120px;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		background-size: 100% 100%;

		.cover {
			text-align: center;
			align-items: center;
			align-self: center;
			justify-content: center;
		}
	}
	.tamga{
    position: sticky;
    top: 30%;
    left: 20%;
    width: 100px;
    z-index: 999;
    float: left;
	    rotate: 30deg;
	}
</style>